<template>
  <div>
    <el-row>
      <el-col :span="22" :offset="1">

        <el-card class="box-card" style="padding: 0 15px;">

          <el-button type="success" style="margin-left:1200px" @click="add">新增</el-button>

          <el-divider></el-divider>


          <div class="block">
            <span class="demonstration" style="margin-left: 50px">创建时间&nbsp;&nbsp;&nbsp;</span>
            <el-date-picker
              v-model="value2"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
            <el-input placeholder="请输入内容" v-model="input3" style="width: 300px;margin-left: 50px;" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>

            <div style="margin-top: 10px;">
              <el-table
                :data="tableData1"
                border
                style="width: 100%">
                <el-table-column
                  fixed
                  prop="date"
                  label="序号"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="患者编号"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="province"
                  label="患者姓名"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="city"
                  label="性别"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="年龄"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="zip"
                  label="手机号码"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="zip"
                  label="创建时间"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="zip"
                  label="操作人员"
                  width="150">
                </el-table-column>


                <el-table-column
                  fixed="right"
                  label="操作"
                  width="230">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">接诊</el-button>
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="block">
              <span class="demonstration"></span>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage3"
                :page-size="10"
                layout="prev, pager, next, jumper"
                :total="100">
              </el-pagination>
            </div>
          </div>

        </el-card>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        tableData1: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }],
        value1: '',
        value2: ''
      };
    },methods: {

      add:function () {
        this.$router.push("/patientinsert")
      }
    }
  };
</script>

<style scoped>

</style>
